<template>
  <el-main>
    <el-card
      shadow="never"
      header="async-validator内置"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        status-icon
      >
        <el-form-item
          label="必填"
          prop="required"
        >
          <el-input v-model="form.required" />
        </el-form-item>
        <el-form-item
          label="长度"
          prop="length"
        >
          <el-input
            v-model="form.length"
            placeholder="长度需为3位"
          />
        </el-form-item>
        <el-form-item
          label="类型"
          prop="type"
        >
          <el-input
            v-model="form.type"
            placeholder="类型可为string number boolean array date url email等"
          />
        </el-form-item>
        <el-form-item
          label="范围"
          prop="range"
        >
          <el-input
            v-model="form.range"
            placeholder="请填写范围在3至5位"
          />
        </el-form-item>
        <el-form-item
          label="枚举"
          prop="enum"
        >
          <el-input
            v-model="form.enum"
            placeholder="请填写admin，user，guest其一"
          />
        </el-form-item>
        <el-form-item
          label="自定义"
          prop="custom"
        >
          <el-input
            v-model="form.custom"
            placeholder="请填写数字1"
          />
        </el-form-item>
        <el-form-item
          label="异步验证"
          prop="async"
        >
          <el-input
            v-model="form.async"
            placeholder="请输入SCUI最新版本号,form开启status-icon后 可以查看右侧状态"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submit"
          >
            验证所有字段
          </el-button>
          <el-button @click="resetForm('form')">
            Reset
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card
      shadow="never"
      header="自定义"
      style="margin-top: 15px;"
    >
      <el-form
        ref="form2"
        :model="form2"
        :rules="rules2"
        label-width="100px"
        status-icon
      >
        <el-form-item
          label="手机号码"
          prop="phone"
        >
          <el-input v-model="form2.phone" />
        </el-form-item>
        <el-form-item
          label="车牌号码"
          prop="cars"
        >
          <el-input v-model="form2.cars" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submit2"
          >
            验证所有字段
          </el-button>
          <el-button @click="resetForm('form2')">
            Reset
          </el-button>
        </el-form-item>
      </el-form>
      <el-alert
        title="自定义验证可在 @/utils/verificate.js 中不断扩展业务需要的验证. 记得要 import 进来"
        type="success"
      />
    </el-card>
  </el-main>
</template>

<script>
import { verifyPhone, verifyCars } from '@/utils/verificate'

export default {
  name: 'Verificate',
  data() {
    return {
      form: {

      },
      rules: {
        required: [
          { required: true, message: '请填写' }
        ],
        length: [
          { required: true, len: 3, message: '长度需为3位' }
        ],
        type: [
          { required: true, type: 'email', message: '类型需为email' }
        ],
        range: [
          { required: true, min: 3, max: 5, message: '范围在3至5位' }
        ],
        enum: [
          { required: true, type: 'enum', enum: ['admin', 'user', 'guest'], message: '请填写admin，user，guest其一' }
        ],
        custom: [
          { required: true, validator: (rule, value)=>{return value === '1'}, message: '请填写数字1' , trigger:'blur'}
        ],
        async: [
          {
            required: true,
            validator: (rule, value, callback)=>{
              this.$API.demo.ver.get({value: value}).then(res => {
                if(res.data != value){
                  return callback(new Error('请输入SCUI最新版本号：'+res.data))
                }
                callback()
              })
            },
            trigger:'blur'
          }
        ]
      },
      form2: {

      },
      rules2: {
        phone: [
          { required: true, message: '请输入姓名' },
          { validator: verifyPhone, trigger:'blur' }
        ],
        cars: [
          { required: true, validator: verifyCars, trigger:'blur' }
        ]
      }
    }
  },
  mounted() {

  },
  methods: {
    submit(){
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.$message.success("全部验证通过")
        }else{
          return false;
        }
      })
    },
    submit2(){
      this.$refs.form2.validate(async (valid) => {
        if (valid) {
          this.$message.success("全部验证通过")
        }else{
          return false;
        }
      })
    },
    resetForm(ref){
      this.$refs[ref].resetFields()
    }
  }
}
</script>

<style>

</style>
